<template>
	<view>
		<scroll-view scroll-y class="page">
			<!-- 头部logo-->
			<view class="UCenter-bg" @click="">
				<view class="mask"></view>
				<view class="png">
					<image mode="aspectFill" :src="personalList.avatar" round class="png" style="width:40px;height: 40px"></image>
				</view>
				<view class="text-lg ">
					{{personalList.realname}}
				</view>
				<!-- <image src="/static/wave.gif" mode="scaleToFill" class="gif-wave"></image> -->
				<!-- <image src="https://mc.xmwells.com/wave.gif" mode="scaleToFill" class="gif-wave"></image> -->
			</view>
			<!-- 个人信息卡片-->
			<!-- <view class="cu-list menu-avatar">
		   	<view class="cu-item">
		   		<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
		   		<view class="content flex-sub">
		   			<view class="text-grey">{{personalList.avatar}}</view>
		   			<view class="text-gray text-sm flex justify-between">
		   				经理
		   			</view>
		   		</view>
		   	</view>
		   </view> -->
			<view class="padding flex text-center text-grey bg-white shadow-warp " style="margin-right:10px;margin-left:10px;margin-top: -40px; border-radius:5px;">
				<view class="flex flex-sub flex-direction solid-right" style="border-color: #0000FF;">
					<view class="text-lg text-blue">{{personalList.orgCodeTxt?personalList.orgCodeTxt:personalList.username}}</view>
					<view><text class="cuIcon-global"></text>{{personalList.orgCodeTxt?'部门':'用户'}}</view>
				</view>

				<view class="flex flex-sub flex-direction ">
					<view class="text-lg text-blue">{{personalList.postName?personalList.postName:'公司职员'}}</view>
					<view><text class="cuIcon-news"></text> 职务</view>
				</view>
			</view>
			<!-- 列表list-->
			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
				<!-- style="-webkit-justify-content:space-between;justify-content:space-between;" -->
				<view class="cu-item arrow " @click="goUser">
					<navigator class="content" hover-class="none">
						<text class="cuIcon-settingsfill text-cyan"></text>
						<text class="text-grey">个人信息</text>
					</navigator>
				</view>
				<view class="cu-item arrow " @click="goUrl">
					<navigator class="content"  hover-class="none">
						<text class="cuIcon-settingsfill text-cyan"></text>
						<text class="text-grey">服务器设置</text>
					</navigator>
				</view>
				<!-- <view class="cu-item arrow ">
					<view class="list-item " @tap="makePhoneCall">
						<view class="content">
							<text class="cuIcon-phone text-yellow"></text>
							<text class="text-grey">技术支持</text>
						</view>
						<view class="black30">{{phone}}</view>
					</view>
				</view> -->
				<view class="cu-item arrow " :style="[{animationDelay: '0.3s'}]" @click="navTo(version)">
					<view class="content">
						<text class="cuIcon-global text-red"></text>
						<text class="text-grey">当前版本</text>
					</view>
					<view class="black30">{{version}}</view>
				</view>
				<!-- <view class="cu-item arrow " :style="[{animationDelay: '0.3s'}]" @click="navTo('checkUpdate')" v-if="appPlus">
					<view class="content">
						<text class="cuIcon-roundcheckfill text-green"></text>
						<text class="text-grey">检查更新</text>
					</view> -->
					<!-- <view class="black30">{{version}}</view> -->
				<!-- </view> -->
				<view class="cu-item arrow " @click="toExit" :style="[{animationDelay: '0.7s'}]">
					<navigator class="content"  hover-class="none">
						<text class="cuIcon-exit text-cyan"></text>
						<text class="text-grey">退出登录</text>
					</navigator>
				</view>
			</view>
			<!-- <view class="cu-list menu  margin-top-xl margin-bottom-xl shadow-lg radius">
			  <view class="cu-item arrow " :style="[{animationDelay: '0.7s'}]">
			  	<navigator class="content" url="/packageB/common/exit" hover-class="none">
			  	    <text class="cuIcon-exit text-cyan"></text>
			  		<text class="text-grey">退出登录</text>
			  	</navigator>
			  </view>
			</view> -->
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/api'
	import appUpdate from 'common/util/appUpdate.js'
	export default {
		name: "people",
		data() {
			return {
				personalList: {
					avatar: '',
					realname: '',
					username: '',
					post: ''
				},
				positionUrl: '/sys/position/list',
				departUrl: '/sys/user/userDepartList',
				userUrl: '/sys/user/queryById',
				userId: '',
				id: '',
				phone: '0592-5910586',
				version: '1.0.6',
				appPlus: false
			};
		},
		watch: {
			cur: {
				immediate: true,
				handler() {
					console.log('watch', this.cur)
					this.load()
				},
			},
		},
		
		methods: {
			navTo(url) {
				if (url == 'checkUpdate') {
					appUpdate(true)
				} else {
					this.$api.msg(`${url}`);
				}

			},
			makePhoneCall() {
				let that = this;
				uni.makePhoneCall({
					phoneNumber: that.phone
				});
			},
			goUser(){
				uni.navigateTo({
					url: '/pages/user/userdetail'
				});
			},
			goUrl(){
				uni.navigateTo({
					url: '/pages/mcloud/urlConfig'
				});
			},
			toExit(){
				uni.navigateTo({
					url: '/pages/common/exit'
				});
				
			},
			remove() {
				uni.removeStorageSync('Access-Token')
			},
			load() {
				this.version = this.$mpversion
				// #ifdef APP-PLUS
				this.appPlus = true //url目前仅为bxh，待完善
				let that = this
				plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
					that.version = wgtinfo.version;
				});
				// #endif
				let id = uni.getStorageSync('login_user_info').id
				this.$http.get(this.userUrl, {
					params: {
						id: id
					}
				}).then(res => {
					if (res.data.success) {
						let perArr = res.data.result
						let avatar = (perArr.avatar && perArr.avatar.length > 0) ? api.getFileAccessHttpUrl(perArr.avatar) :
							'/static/avatar.png'
						this.personalList.avatar = avatar
						this.personalList.realname = perArr.realname
						this.personalList.username = perArr.username
						this.personalList.postName = perArr.postName
						this.personalList.depart = perArr.departIds
						this.personalList.orgCodeTxt = perArr.orgCodeTxt
					}
				}).catch(err => {
					console.log(err);
				});

			}
		}
	}
</script>

<style scoped>
	.UCenter-bg {
		/* background-image: url(https://image.weilanwl.com/color2.0/index.jpg); */
		/* background-image: url(../../static/userpage.jpg);	 */
		/* background: repeating-radial-gradient(farthest-side at 60% 55%, #41d1c1, #40E0D0, #41cebe); */
		/* background: repeating-radial-gradient(farthest-side at 60% 55%, #43abe3, #34a4df, #43abe3); */
		background: repeating-radial-gradient(farthest-side at 60% 55%, #04af75, #04af75, #04af75);
		background-size: cover;
		height: 400rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.png {
		border-radius: 50%;
		overflow: hidden;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* .UCenter-bg .mask{
	background: repeating-radial-gradient(farthest-side at 60% 55%, #41d1c1, #40E0D0, #41cebe);
	height: 100%;
} */

	.UCenter-bg text {
		opacity: 0.8;
	}

	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	map,
	.mapBox {
		width: 750rpx;
		height: 300rpx;
	}

	.black30 {
		/* margin-right: 100px; */
		display: flex;
		align-items: flex-end;
		position: relative;
		font-size: 30rpx;
		color: rgba(40, 40, 40, 1);
	}

	.cu-list.menu-avatar>.cu-item .fcontent {
		position: absolute;
		left: 146upx;
		width: calc(100% - 96upx - 60upx - 120upx - 20upx);
		line-height: 1.6em;

	}

	.list-item {
		text-align: justify;
		-webkit-justify-content: space-between;
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
		justify-content: space-between;
	}

	.flex-space {
		justify-content: space-between;
	}

	.glay30 {
		font-size: 30rpx;
		margin-bottom: 69rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		text-align: center;
	}

	/deep/button {
		border: 0;
	}

	.flex-row {
		border-top: 1px solid rgba(229, 229, 229, 1);
	}

	.m-r-20 {
		margin-right: 20rpx;
	}

	.solid-right::after {
		border-right: 1upx solid #3bade3;
	}
</style>
